.image-tuniao1{
	padding: 165rpx 0rpx;
	font-size: 40rpx;
	font-weight: 300;
	position: relative;
}
.image-tuniao2{
	padding: 75rpx 0rpx;
	font-size: 40rpx;
	font-weight: 300;
	position: relative;
}
.image-pic{
	border: 1rpx solid #F8F7F8;
	background-size: cover;
	background-repeat:no-repeat;
	// background-attachment:fixed;
	background-position:top;
	border-radius: 10rpx;
}

/* 间隔线 start */
.tn-strip-top {
  width: 100%;
  border-top: 24rpx solid rgba(241, 241, 241, 0.8);
}

.tn-strip-bottom {
  width: 100%;
  border-bottom: 10rpx solid rgba(241, 241, 241, 0.8);
}
.tn-strip-bottom:nth-last-child(1) {
	border-bottom: 0rpx;
}

.tn-strip-top-bottom {
  width: 100%;
  height: 150rpx;
  border-top: 24rpx solid rgba(241, 241, 241, 0.8);
  border-bottom: 12rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/



.tn-content-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  max-height: 100vh;
	
}

.tn-load-more-70 {
  height: 20rpx;
	margin: 50rpx 0;
}

.tn-horizontal-center {
  justify-content: center;
  align-items: center;
}

.tn-vertical-center {
  display:flex;
  flex-direction:row;
  align-items:center;
}


.tn-text-ellipsis-3 {
	display: -webkit-box;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


.tn-login {
  background: #ffffff00;
  padding: 0;
  text-align: left;
  line-height: 1.3;
}



/* 底部安全边距 start */
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}
.tn-tabbar-height2 {
  min-height: 90rpx;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  height: calc(100rpx + constant(safe-area-inset-bottom));
}
/* 底部安全边距 end */


/* 顶部导航 start */
.custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
      
      &__logo{
        background-image: url('@/static/logo.png');
        background-size: cover;
        background-repeat:no-repeat;
        background-position:top;
        border-radius: 50%;
        border: 1rpx solid #FFFFFF000;
        
        &__image{
          width: 65rpx;
          height: 65rpx;
          position: relative;
          border-radius: 50%;
        }
      }
    }
    
    &__search {
      width: 55%;
      height: 100%;
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      
      &__box {
        flex: 1;
      
        &__input {
          border-radius: 30rpx;
        }
      }
    }
    
    ::v-deep .icon {
      color: #000 !important;
    }
  }
  
  .spin{
    animation: spin 12s ease-in-out infinite;
  }
  @keyframes spin {
    0%{
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  /* 顶部导航 end */
	
	
	
	
	/* 用户头像 start */ 
	.user-profile {
	  background-size: cover;
	  background-repeat: no-repeat;
	  // background-attachment:fixed;
	  background-position: top;
	  border: 8rpx solid rgba(255,255,255,0.05);
	  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	  border-radius: 50%;
	  overflow: hidden;
	  // background-color: #FFFFFF;
		
		&__image {
			width: 110rpx;
			height: 110rpx;
			position: relative;
			overflow: hidden;
			border-radius: 50%;
		}
		
		&__image2 {
			width: 110rpx;
			height: 110rpx;
			position: relative;
			overflow: hidden;
			border-radius: 50%;
		}
	}
	/* 用户头像 end */ 
	
	
	
	.blue-title::before {
	  content: "";
	  position: absolute;
	  display: block;
	  width: 70rpx;
	  height: 26rpx;
	  background: #269EFC;
	  margin-top: 20rpx;
	  margin-left: 66rpx;
	  opacity: 0.3;
	  z-index: -1;
	  border-radius: 0 5rpx 5rpx 0;
	}
  
  
  .blue-title-2::before {
    content: "";
    position: absolute;
    display: block;
    width: 70rpx;
    height: 26rpx;
    background: #269EFC;
    margin-top: 20rpx;
    margin-left: 98rpx;
    opacity: 0.3;
    z-index: -1;
    border-radius: 0 5rpx 5rpx 0;
  }
	
  
  
  
  
  
	.list {
    &__project {
      margin: 20rpx 30rpx;
      padding: 36rpx 26rpx 20rpx 26rpx;
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    
    &__demand {
      margin: 20rpx 30rpx;
      padding: 36rpx 26rpx 30rpx 26rpx;
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    
    &__article {
      margin: 20rpx 30rpx;
      padding: 36rpx 26rpx 30rpx 26rpx;
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
      image {
        width: 170rpx;
        height: 170rpx;
        border-radius: 10rpx;
      }
    }
    
    
		&__item {
			&__content {
			  margin-top: 20rpx;
			  &__image {
			    margin-right: 20rpx;
			    image {
			      width: 140rpx;
			      height: 140rpx;
			      border-radius: 10rpx;
			    }
			  }
			  &__title {
			    padding-right: 40rpx;
			    display: -webkit-box;
			    overflow: hidden;
			    white-space: normal !important;
			    text-overflow: ellipsis;
			    word-wrap: break-word;
			    -webkit-line-clamp: 3;
			    -webkit-box-orient: vertical;
			  }
			}
		}
		
	  &__label {
	    &__item {
	      color: #1D2541;
	      border-radius: 10rpx;
	      font-size: 24rpx;
	      
	      padding: 5rpx 15rpx 5rpx 0;
	      margin: 5rpx 0 5rpx 0;
	      &--prefix {
	        font-size: 24rpx;
	        color: #1D2541;
	        padding-right: 10rpx;
	      }
	    }
			&__item:nth-child(4n+1){
				margin: 5rpx 0 5rpx 0;
			}
	    
	    &__desc {
	      line-height: 55rpx;
	    }
	  }
		
		&__desc {
		  line-height: 30rpx;
		  &__label {
		    color: #1D2541;
		    background-color: #F3F2F7;
		    border-radius: 10rpx;
		    font-size: 22rpx;
		    padding: 5rpx 15rpx;
		    margin: 5rpx 18rpx 0 0;
		    
		    &--prefix {
		      font-size: 24rpx;
		      color: #1D2541;
		      padding-right: 10rpx;
		    }
		  }
		  &__content {
		    line-height: 50rpx;
		  }
		}
	  
	  &__image {
	    border: 1rpx solid #F8F7F8;
	    &--0 {
	      max-width: 100%;
	      min-width: 100%;
	      max-height: 400rpx;
	      min-height: 400rpx;
	    }
			&--1 {
				width: 100%;
				max-width: 100%;
				max-height: 300rpx;
			}
			&--2 {
				height: 260rpx;
				width: 100%;
			}
			&--3 {
				height: 212rpx;
				width: 100%;
			}
	  }
	  
	  &__count-icon {
	    font-size: 40rpx;
	    padding-right: 5rpx;
	  }
	}
	
  
  /* 自定义标签banner */
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 45rpx;
      padding: 10rpx 30rpx;
      margin: 20rpx 20rpx 5rpx 0rpx;
      
      &--prefix {
        padding-right: 10rpx;
      }  
    }
  }
  
	
	/* 自定义顶部banner */
	
	
	
	
	/* 自定义图片预览 start */
	.movable-area {
	  position: fixed;
	  z-index: 99999;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  background-color: rgba(0, 0, 0, 0.9);
	  
	  .movable-view {
	    width: 100vw;
	    height: 90vh;
	    justify-content: center; /*子元素水平居中*/
	    align-items: center; /*子元素垂直居中*/
	    display: -webkit-flex;
	  }
	  
	  .preview-back {
	    position: absolute;
	    right: 40rpx;
	    bottom: 100rpx;
	    font-size: 48rpx;
	  }
	}
	/* 自定义图片预览 end */
	
	
	
	/* 自定义底部导航 start */
	.tn-bottom-nav {
	    background-color: #FFFFFF;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    height: 88rpx;
	    width: 100%;
	    box-sizing: content-box;
	    
	    &--fixed {
	      position: fixed;
	      bottom: 0;
	      left: 0;
	      right: 0;
	    }
	    
	    .options {
	      width: 100%;
	      display: flex;
	      flex-direction: row;
	      align-items: center;
	      height: 100%;
	      color: #AAAAAA;
	      
	      &__item {
	        width: 100%;
	        display: flex;
	        padding: 0 26rpx;
	        
	        button {
	          background-color: #Fff;
	          margin-left: 0;
	          margin-right: 0;
	          padding-left: 0;
	          padding-right: 0;
	          overflow: inherit;
	          line-height: inherit;
	        }
	        
	        &__icon {
	          position: relative;
	          font-size: 36rpx;
	          margin-bottom: 6rpx;
	        }
	        
	        &__text {
	          font-size: 22rpx;
	          color: #080808;
	        }
	        
	        &__text2 {
	          height: 100%;
	          align-items: center;
	          justify-content: center;
	          display: flex;
	          font-size: 30rpx;
	          color: #FFFFFF;
	        }
	        
	        &__selected1 {
	          color: #FBBD12 !important;
	        }
	        
	        &__selected2 {
	          color: #FBBD12 !important;
	        }
	      }
	    }
	  }
	  /* 自定义底部导航 end */
    
    
    
    
    
    
    .cx-top-banner {
      z-index: 1;
      position: fixed;
      top: 0;
      width: 100%;
      transition: all 0.25s ease-out;
      will-change: transform;
      
      &-list {
        height: 800rpx !important;
      } 
      
      &-view {
        height: 640rpx !important;
      }
      swiper-item {
        width: 750rpx !important;
        left: 0rpx;
        box-sizing: border-box;
        overflow: initial;
        
        .item {
          width: 100%;
          display: block;
          height: 100%;
          transform: scale(1);
          transition: all 0.2s ease-in 0s;
          will-change: transform;
          overflow: hidden;
        }
    
        .image{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .image image{
          width: 100%;
          height: 100%;
          object-fit: cover; 
        }
      }
      
      swiper-item.cur .item {
        transform: none;
        transition: all 0.2s ease-in 0s;
        will-change: transform;
      }
    }
    .cx-list {
      margin-top: 700rpx;
      margin-bottom: 100rpx;
      border-radius: 80rpx 80rpx 0 0;
      z-index: 2;
    }
    .cx-view {
      margin-top: 540rpx;
      margin-bottom: 100rpx;
      border-radius: 40rpx 40rpx 0 0;
      z-index: 2;
    }

.cx-editor {
  padding: 0 10rpx;
  
  // 富文本编辑器内容
  ::v-deep rich-text {
    .code-block-style {
      background: #1a262f !important; 
      color: #e6ecef !important; 
      border: 1px solid #2d414e !important; 
      white-space: pre-wrap !important; 
      word-wrap: break-word !important;
      word-break: break-all !important;
      overflow-x: hidden !important; 
      padding: 20rpx !important; 
      border-radius: 8rpx !important; 
      font-family: 'Consolas', 'Monaco', monospace !important; 
      font-size: 24rpx !important; 
      line-height: 1.6 !important; 
      margin: 20rpx 0 !important; 
      display: block !important; 
    }
    
    .code-block-style .language-php .keyword {
      color: #5ba060 !important;
      font-weight: 500 !important;
    }
    .code-block-style .language-php .variable {
      color: #f8c630 !important; 
    }
    .code-block-style .language-php .string {
      color: #81c784 !important; 
    }
    .code-block-style .language-php .number {
      color: #81c784 !important; 
    }
    .code-block-style .language-php .comment {
      color: #90a4ae !important;
      font-style: italic !important; 
    }
    .code-block-style .language-php .function-name {
      color: #4cc9f0 !important; 
    }
    
    .code-inline-style {
      background: #1e2e38 !important; 
      color: #5ba060 !important;
      padding: 2rpx 8rpx !important; 
      border-radius: 4rpx !important; 
      font-family: 'Consolas', monospace !important; 
      font-size: 24rpx !important; 
    }
    
    img {
      width: 100% !important;
      max-width: 100% !important; 
      height: auto !important; 
      margin: 10rpx 0 !important; 
      display: block !important; 
    }
    
    p {
      font-size: 28rpx !important; 
      color: #333 !important; 
      line-height: 1.8 !important;
      margin: 15rpx 0 !important; 
      padding: 0 !important; 
    }
  }
  
  
  ::v-deep video {
    width: 100% !important;
    max-width: 100% !important; 
    border-radius: 10rpx;
    margin: 20rpx 0 80rpx 0;
  }
}